@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
@endsection
@section('content')
    <link href="/lib/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/js/upload.js" type="text/javascript"></script>
    <script src="/js/mobileBUGFix.mini.js" type="text/javascript"></script>
    <link href="/css/ueditor.css" type="text/css" rel="stylesheet">
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/course/list">课程列表</a> </li>
                <li class="active">添加课程</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">课程添加</a></li>
                <li role="presentation" class="course_hour_add"><a href="javascript:void(0);">课时添加</a></li>
            </ul>
            <form class="form-horizontal" id="courseFormInfo" action="/course/postCreate" method="post">
                {{csrf_field()}}
                <div class="course_class row">
                    <div class="col-md-10">
                            <br>
                            <div class="tab-content">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">seo标题</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="inputEmail3" name="seo_title" placeholder="seo标题">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">seo描述</label>
                                    <div class="col-sm-9">
                                        <textarea type="text/plain" class="form-control" placeholder="seo描述" id="inputEmail3" name="seo_description"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">课程名称</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="inputEmail3" name="name" placeholder="课程名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">课程分类</label>
                                    <div class="col-sm-9">
                                        <select class="form-control courseType" name="courseType">
                                            <option value="0">请选择</option>
                                            @foreach($courseTypes as $courseType)
                                                <option value="{{$courseType->id}}">{{$courseType->title}}</option>
                                                @foreach($courseType->child as $v)
                                                    <option value="{{$v->id}}" @if($v->course_type_id == $v->id) selected @endif> &nbsp; ├{{$v->title}}</option>
                                                    @foreach($v->child as $a)
                                                        <option value="{{$a->id}}" @if($a->course_type_id == $a->id) selected @endif> &nbsp; &nbsp; ├├{{$a->title}}</option>
                                                    @endforeach
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">难易级别</label>
                                    <div class="col-sm-9">
                                        <select class="form-control courseType" name="level">
                                            <option value="S1零基础">S1零基础</option>
                                            <option value="S2进阶">S2进阶</option>
                                            <!-- <option value="S3进阶">S3进阶</option> -->
                                        </select>
                                    </div>
                                </div>
                               <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">课程排序值</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" value="" id="inputEmail3" name="orderby" placeholder="课程排列序号值">
                                        
                                    </div>
                                    <b>(课程显示排序值从大到小排序,最小为0)</b>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">正在学习人数</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" value="" id="inputEmail3" name="studying_num" placeholder="填写正在学习人数"> 
                                    </div>
                                    
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">是否最热课程</label>
                                    <div class="col-sm-9">
                                        <select class="form-control courseType" name="is_hot">
                                            <option value="1">是</option>
                                            <option value="0" selected>否</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">是否付费</label>
                                    <div class="col-sm-9">
                                        <select class="form-control courseType" name="payFree">
                                            <option value="0">免费</option>
                                            <option value="1">付费</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">是否可试看</label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input type="radio" name="preview" checked id="inlineRadio2" value="0"> 否
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="preview" id="inlineRadio3" checked value="1"> 是
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">是否直播课</label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input type="radio" name="is_live" checked id="inlineRadio2" value="0"> 否
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="is_live" id="inlineRadio3" value="1"> 是
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">价格</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="inputPassword3" name="price" placeholder="价格">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">作者</label>
                                    <div class="col-sm-9">
                                        <button type="button" class="btn btn-primary btn-lg" data-page="1" onclick="selectAuthor(this);">选择</button>&nbsp;&nbsp;<span style="color:blue;" id="userName"></span>
                                        <input type="hidden" class="form-control" value="" id="inputPassword3" name="author">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">标签</label>
                                    <div class="col-sm-9">
                                        @foreach($tags as $tag)
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="tags[]" value="{{$tag->id}}">{{$tag->title}}
                                        </label>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">课程配图</label>
                                    <div class="col-sm-9">

                                        <a href="javascript:;" class="file">上传封面图(180X220)
                                            <input type="file" class="upload_img cover" name="coverUrl" placeholder="封面图">
                                        </a>

                                        <a href="javascript:;" class="file">上传说明图(750X300)
                                            <input type="file" class="upload_img explain" name="explainUrl" placeholder="说明图">
                                        </a>
                                        
                                        <img src="" id="cover_img" style="width:120px;max-height:120px;">
                                        <img src="" id="explain_img" style="width:120px;max-height:120px;">
                                        <span id="error_img_size" style="color:red;"></span>
                                        <input type="hidden" class="cover_img" name="coverImg" />
                                        <input type="hidden" class="explain_img" name="explainImg" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">推送内容</label>
                                    <div class="col-sm-9">
                                        <textarea type="text/plain" class="form-control" placeholder="例如：课程精细讲解背部构造知识，让您拥有专属于自己的背部方案，练就姿态挺拔的强大气质" id="pushMessage" name="pushMessage"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">课程介绍</label>
                                    <div class="col-sm-9">
                                        <textarea type="text" name="introduction" id="myEditor" style="width:700px;height:240px;" ></textarea>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div style="display:none;" class="course_section row">
                <div class="col-md-12">
                    <br>
                    <div id="myTabContent" class="tab-content">
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-1 control-label">课时</label>
                            <div class="col-sm-11 course_total_add">
                                <div class="row section_num">
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="control-label"><span>第一节：</span></label>
                                        </div>
                                    </div>
                                    <div class="col-sm-10 create_course">
                                        <div class="row course_content">
                                            <div class="col-sm-5">
                                                <div class="input-group">
                                                        <span class="input-group-btn">
                                                            <button class="btn btn-default" type="button">小节标题</button>
                                                        </span>
                                                    <input type="text" class="form-control" name="course_section_one" style="width:230px;" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="control-label"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="col-sm-10 create_course">
                                        <div class="row course_content">
                                            <div class="col-sm-5">
                                                <div class="input-group">
                                                        <span class="input-group-btn">
                                                            <button class="btn btn-default" type="button">课程名称</button>
                                                        </span>
                                                    <input type="text" class="form-control" name="course_name_one[]" style="width:230px;" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-sm-5">
                                                <div class="input-group">
                                                         <span class="input-group-btn">
                                                              <button class="btn btn-default" type="button">课程地址</button>
                                                         </span>
                                                    <input type="text" class="form-control" name="course_address_one[]" style="width:260px;" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <button type="button" class="btn btn-primary" onclick="addNewCourse(this);" data-name="one" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i>新增</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-1 control-label"></label>
                            <div class="col-sm-11">
                                <button type="button" onclick="addCourseClass(this);" class="btn btn-success" style="background-color:rgba(102, 204, 0, 1);color:#fff;">添加课时</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            <button type="submit" class="btn btn-primary btn-lg col-md-offset-5" style="width:120px;background:#286090;color:#fff;">提交</button>
                        </p>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择作者</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/ueditor.js"></script>
    <script src="/js/course.js"></script>
    <script src="/lib/jquery.validate.js" type="text/javascript"></script>
    <script>

        var imgUrl = '{{env('IMG_URL')}}';
        $(".upload_img").UploadImg({
            url : '/course/fileUpload',
            // width : '320',
            //height : '200',
            quality : '0.8', //压缩率，默认值为0.8
            // 如果quality是1 宽和高都未设定 则上传原图
            mixsize : '500000',
            //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
            before : function(blob,className){
//                var className = '#'+className;
//                $(className).attr('src',blob);
            },
            error : function(res){
                $('#img').attr('src','');
                $('#error_img_size').html(res+"~亲~不能超过500kb");
            },
            success : function(url,className){
                $('#error_img_size').html("");
                var idName = '#'+className;
                var className = '.'+className;
                $(idName).attr('src',imgUrl+url);
                $(className).val(url);
            }
        });
        $("#courseFormInfo").validate({
            onsubmit: true,// 是否在提交是验证
            submitHandler: function (form) {
                var name = $("input[name='name']").val();
                var courseType = $(".courseType").val();
                var author = $("input[name='author']").val();
                var tags = $("input[name='tags[]']:checked").val();
                var cover_img = $("input[name='coverImg']").val();
                var explain_img = $("input[name='explainImg']").val();
                var pushMessage = $.trim($("#pushMessage").val());
                if(name == ''){
                    swal("课程名称未录入!");
                    return false;
                }
                if(!courseType || courseType == 0){
                    swal("未选择课程分类!");
                    return false;
                }
                if(!author){
                    swal("未选择作者!");
                    return false;
                }
                if(!tags){
                    swal("未选择标签");
                    return false;
                }
                if(cover_img == ''){
                    swal("未上传封面图");
                    return false;
                }
                if(explain_img == ''){
                    swal("未上传说明图");
                    return false;
                }
                if(pushMessage == ''){
                    swal('未填写推送消息');
                    return false;
                }
                form.submit();
            }
        });
    </script>
    <style type="text/css">
        .col-sm-2{
            width:60px;
        }
        .course_content{
            margin-right: -30px;
            margin-left: -30px;
            margin-top:5px;
        }
        .btn-success{
            background-image:none!important;
        }
    </style>
@endsection